<template>
  <div class="valite">
    <div class="mian">
      <img src="../../common/image/change_phone.png" alt="">
      <div class="input_box">
        <input type="text" name="phone_nums" :value="mobile" v-on:input="phoneVal" placeholder="请输入手机号码">
        <p>
          <input type="text" name="code" placeholder=" 请输入验证码" v-on:input="codeVal">
          <button type="button" id="send" :class="{disabled: !this.canClick}"  @click="countDown">{{content}}</button>
        </p>
      </div>
      <button type="button" @click="phone_ok" style="letter-spacing: 8px;">确定</button>
    </div>
  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
  import { Toast } from 'mint-ui';
  import { RequestGet,RequestPost} from '@/api/http.js'
  export default {
    data(){
      return{
        uid: '',
        mobile: '',
        content:'发送验证码',
        totalTime: 60,
        canClick: true,
        writer:false
      }
    },
    component:{
      MessageBox,
      Toast
    },
    methods:{
      countDown() {
        if(this.writer == true){
          //console.log(this.mobile);
          RequestPost({url:'http://test.keoconf.com/api/sms/send',data: {'mobile':this.mobile}}).then((respones)=>{
            if(respones.data.code == 1){
              Toast('发送成功！');
              if (!this.canClick) return;
              this.canClick = false;
              this.content = this.totalTime + 's后重新发送';
              let send = document.querySelector('#send');
              send.style.backgroundColor = 'gainsboro';
              send.style.color = '#303030';
              let clock = window.setInterval(() => {
                this.totalTime--;
                this.content = this.totalTime + 's后重新发送';
                if (this.totalTime < 0) {
                  window.clearInterval(clock);
                  this.content = '重新发送验证码';
                  this.totalTime = 60;
                  this.canClick = true;
                  send.style.backgroundColor = '#557ae4';
                  send.style.color = '#fff';
                }
              }, 1000)
            }else{
              Toast(respones.data.msg);
            }

          })

        }else {
          Toast({
            message: '请输入正确的手机号码',
            position: 'bottom',
            duration: 5000
          });
        }
      },
      phoneVal(e){
        let phone_nums = document.querySelector('input[name=phone_nums]');
        let send = document.querySelector('#send');
        if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.target.value))){
          send.style.backgroundColor = 'gainsboro';
          send.style.color = '#303030';
        }else{
          phone_nums.style.borderBottomColor = 'gainsboro';
          phone_nums.className = '';
          send.style.backgroundColor = '#557ae4';
          send.style.color = '#fff';
          this.writer = true;
          this.mobile = phone_nums.value;
        }
      },
      codeVal(e){
        let code = document.querySelector('input[name=code]');
        let input_box = document.querySelectorAll('.input_box')[0];
        let send = document.querySelector('#send');
        if(e.target.value == ''){
          input_box.style.borderBottomColor = 'red';
          code.className = 'active_no';
        }else{
          input_box.style.borderBottomColor = 'gainsboro';
          code.className = '';
        }

      },
      phone_ok(){
        let self = this;
        let phone_nums = document.querySelector('input[name=phone_nums]');
        let code = document.querySelector('input[name=code]');
        let input_box = document.querySelectorAll('.input_box')[0];
        let send = document.querySelector('#send');

        if(phone_nums.value != '' && code.value != ''){
          let data = {'mobile':self.mobile,'captcha':code.value,'event':'register'};
          RequestPost({url:'http://test.keoconf.com/api/validate/check_sms_correct',data: data}).then((respones)=>{
            if(respones.data.code == 1){
              RequestPost({url:'/user/changeInfo',data: {'id': self.$route.query.uid,'mobile':self.mobile}}).then((respones)=>{
                if(respones.data.code == 1){
                  MessageBox.alert('操作成功').then(action => {
                    self.$router.push('/personal_details?uid=' + self.$route.query.uid);
                  });
                }else{
                  Toast(respones.data.msg);
                }
              })
            }else{
              Toast(respones.data.msg);
            }
          })
        }else {
          if(phone_nums.value == ''){
            Toast({
              message: '请输入手机号码',
              position: 'bottom',
              duration: 5000
            });
            if(!(/^1(3|4|5|7|8)\d{9}$/.test(phone_nums.value))){
              phone_nums.style.borderBottomColor = 'red';
              phone_nums.className = 'active_no';
              send.style.backgroundColor = 'gainsboro';
              send.style.color = '#303030';
            }else{
              phone_nums.style.borderBottomColor = 'gainsboro';
              phone_nums.className = '';
              send.style.backgroundColor = '#557ae4';
              send.style.color = '#fff';
              self.writer = true;
            }
          }else if(code.value == ''){
            input_box.style.borderBottomColor = 'red';
            code.className = 'active_no';
            Toast({
              message: '请输入验证码',
              position: 'bottom',
              duration: 5000
            });
          }
        }

      }
    },
    watch: {
      '$route': function (n, o) {
        this.uid = n.query.uid;
      }
    },
    mounted () {
      let self = this;
      self.uid = self.$route.query.uid;
    }
  }
</script>

<style scoped lang="scss">
  .valite{
    text-align: center;
    width: 100%;
    overflow: hidden;
    .mian{
      margin: 20% 0;
      padding: 0 5%;
      div{
        width: 100%;
        margin: 20px 0;
        font-size: 28px;
        border-bottom: 1px solid gainsboro;
        overflow: hidden;
        input{
          width: 100%;
          height: 80px;
          line-height: 80px;
          padding: 10px;
          text-indent: 30px;
          font-size: 30px;
          border-bottom: 1px solid gainsboro;
        }
        p{
          width: 100%;
          height: 100px;
          line-height: 80px;

          margin-top: 20px;
          input{
            float: left;
            width: 55%;
            text-indent:30px;
            font-size: 30px;
            background: transparent;
            border: transparent;
          }
          button{
            float: right;
            width: 220px;
            margin-right: 50px;
            background: #eee;
            color: #303030;
            font-size: 26px;
            margin-top: 0;
            font-size: 30px;
          }
          .disabled{
            background-color: #eee;
            border-color: #eee;
            color:#303030;
            cursor: not-allowed; // 鼠标变化
          }
        }
      }
      img{width: 40%;}
      button{
        color: #fff;
        background: #557ae4;
        width: 70%;
        height: 80px;
        line-height: 80px;
        border: none;
        border-radius: 5px;
        font-size: 30px;
        margin-top: 30px;
        font-size: 38px;
      }
    }
  }
</style>
<style>
  .mint-msgbox-title,.mint-msgbox-message,.mint-msgbox-btn{font-size: 30px;padding: 20px 0;}
  .mint-msgbox-btns{height: 1.4rem;}
  .mint-toast-text{font-size: 30px;padding: 10px;}
  .active_no::-webkit-input-placeholder{color:red;}
</style>
